<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>vue</title>
        <!-- 引入vue文件-->
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
		<!--引入vue-resource插件-->
		<script src="../js/vue-resource.js"></script>
	</head>
	<body>
		<!--选中数据的样式-->
		<style>
			.gray{
				background: #C0C0C0;
			}
		</style>
		<div id="vue">
			<!--绑定事件,点击方向键时触发改变now值事件,使now=对应数据的key从而改变其样式-->
			<!--$event:表示点击的元素,即那个键-->
			<input type="text" placeholder="请输入关键词" v-model="words" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()"/>
			<ul>
				<!--gray:true时class生效,即key==now为true-->
				<li v-for="(value,key) in searchData" :class="{gray:key==now}">
					{{value}}
				</li>
			</ul>
			<p v-if="searchData.length==0">暂无数据</p>
		</div>
	</body>
	<script type="application/javascript">
		new Vue({
			el:'#vue',
			data:{
				searchData:[],
				words:'',
				now:-1
			},
			methods:{
				get:function(event){
					/*如果是按上下键则不触发请求,防止数据一直变化*/
					if(event.keyCode==38 || event.keyCode==40)return;
					/*如果按回车键,则打开搜索结果页面*/
					if(event.keyCode==13){
						window.open('https://www.baidu.com/s?wd='+this.words);
						this.words='';/*清空输入框*/
					}
					this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
						wd:this.words   //搜索条件
					},{
						jsonp:'cb'    //回调函数名,每个网站不同,百度的是cb
					}).then(function(res){
						this.searchData=res.data.s;
					},function(err){
						alert("请求失败")
					});
				},
				/*点击方向键下键时,改变样式*/
				changeDown:function(){
					this.now++;
					/*最后一个数据还按下键,则使now变为第一个数据的key*/
					if(this.now==this.searchData.length)this.now=0;
					//选中行值添加到输入框中
					this.words=this.searchData[this.now];
				},/*上键同理*/
				changeUp:function(){
					this.now--;
					/*开始按上键,now值变为-2,则使now值变成最后一个数据的key值*/
					if(this.now==-2 || this.now==-1)this.now=this.searchData.length-1;
					this.words=this.searchData[this.now];
				}
			}
		})
	</script>
</html>
